<template>
    <h2>bigTab 大表格</h2>
    <p>本地模拟的一百万条数据</p>
    <div class="component_item">
        <div class="p_20">
            <UiBigTab title="深圳常住人口统计" :tabBody="tabData" :tabHead="tabHead"/>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;UiBigTab title="深圳常住人口统计" :tabBody="tabData" :tabHead="tabHead"/>
    
    &lt;script setup>
        import { UiBigTab } from 'yong-ui'
        import { ref } from 'vue';
    
        const tabHead = ref({ val1: '姓名', val2: '年龄', val3: '性别', val4: '通信地址' , val5: '电话' , val6: '证件号码' , val7: '是否深户' , val8: '是否结婚' })
        const tabData = ref([])
        const starTime = Date.now()
    
        // 多线程处理数据 避免页面卡顿
        let myWorker = new Worker('/workers/worker.js');
        // 发送消息
        myWorker.postMessage(1000000)   
        //接受消息
        myWorker.onmessage = (e) => {
            console.log('多线程处理数据耗时：', Date.now() - starTime, 'ms');
            tabData.value = e.data;
            myWorker.terminate()
        }
    
    &lt;/script>
        </pre>
    </div>

    <p class="mt20 small_p">worker.js</p>
    <pre class="code top_no_radius" v-pre>
const surname = "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹"
const name = "二十丁厂七卜人入八九几儿了力乃刀又三于干亏士工土才寸下大丈与万上小口巾山千乞川亿个勺久凡及夕丸么广亡门义之尸弓己已子卫也女飞刃习叉马乡丰王井开夫天无元"
const ares = ['福田', '罗湖', '南山', '龙华', '龙岗', '宝安', '光明', '大鹏', '坪山']
let tabData = []
self.onmessage = (e) => {
    let n = Number(e.data)
    for(let i = 0; i &lt; n; i++) {
        tabData.push({
            id: 'Id'+Date.now(),
            val1: surname[Math.floor(Math.random()*99)] + '*' + name[Math.floor(Math.random()*75)],
            val2: Math.floor(Math.random()*100),
            val3: Math.floor(Math.random()*10) > 5 ? '男' : '女',
            val4: '深圳市'+ares[Math.floor(Math.random()*9)]+'区',
            val5: ('1'+Math.floor(Math.random()*100)).padEnd(3, '0')+'****'+'8888',
            val6: (Math.floor(Math.random()*999999999)+'').padEnd(9, '0')+'****8888',
            val7: Math.floor(Math.random()*10) > 5 ? '是' : '否',
            val8: Math.floor(Math.random()*10) > 5 ? '是' : '否'
        })
    }
    self.postMessage(tabData)
}
    </pre>

</template>
<script setup>
// import { UiBigTab } from 'yong-ui'
import { ref } from 'vue';
import {UiBigTab} from '../components'


const tabHead = ref({ val1: '姓名', val2: '年龄', val3: '性别', val4: '通信地址' , val5: '电话' , val6: '证件号码' , val7: '是否深户' , val8: '是否结婚' })
const tabData = ref([])

const starTime = Date.now()

// 多线程处理数据 避免页面卡顿
let myWorker = new Worker('/workers/worker.js');
// 发送消息
myWorker.postMessage(1000000)   
//接受消息
myWorker.onmessage = (e) => {
    console.log('多线程处理数据耗时：', Date.now() - starTime, 'ms');
    tabData.value = e.data;
    myWorker.terminate()
}

</script>
<style lang="css" scoped>
.small_p{
    background: #43436d;
    color: #d6e5f3;
    padding-left: 10px;
}
</style>